<template>
  <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-alert type="info">
        <div slot="message">
          <div>1、当前设置的数据仅对保存后进入系统的新数据生效，对系统已有的旧数据不做变更。</div>
          <div>2、仅对选中的站点数据做批量更新，若左侧选中的字段在右侧内容为空时，保存后选中站点的对应字段都将清空。</div>
        </div>
      </a-alert>
      <a-row type="flex">
        <a-col class="card-left" flex="200px">
          <div class="checkbox-all">
            <a-checkbox :indeterminate="checkModel.indeterminate" :checked="checkModel.checkAll" @change="onCheckAllChange">
              全部
            </a-checkbox>
          </div>
          <div class="checkbox">
            <a-checkbox-group v-model="checkModel.checkedList" :options="dictOptions" @change="onChange" />
          </div>   
        </a-col>
        <a-col style="width: calc(100% - 200px);">
          <j-form-container v-if="checkModel.checkedList.length >0">
            <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
              <a-row>
                <a-col :span="24" v-if="showItemHandle('ioss')">
                  <a-form-model-item label="IOSS" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ioss">
                    <a-input v-model="model.ioss" placeholder="请输入IOSS"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('iossInterCode')">
                  <a-form-model-item label="IOSS国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="iossInterCode">
                    <a-input v-model="model.iossInterCode" placeholder="请输入IOSS国际代码"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('eori')">
                  <a-form-model-item label="EORI" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eori">
                    <a-input v-model="model.eori" placeholder="请输入EORI"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('eoriInterCode')">
                  <a-form-model-item label="EORI国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eoriInterCode">
                    <a-input v-model="model.eoriInterCode" placeholder="请输入EORI国际代码"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('taxNum')">
                  <a-form-model-item label="税号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxNum">
                    <a-input v-model="model.taxNum" placeholder="请输入税号"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('taxInterCode')">
                  <a-form-model-item label="税号所属国际代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxInterCode">
                    <a-input v-model="model.taxInterCode" placeholder="请输入税号所属国际代码"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('autoCreateWarehouse')">
                  <a-form-model-item label="自动创建FBA仓库信息" :labelCol="labelCol" :wrapperCol="wrapperCol"
                    prop="autoCreateWarehouse">
                    <j-multi-select-tag v-model="model.autoCreateWarehouse" dictCode="oms_auto_create_warehouse"
                      placeholder="请选择自动创建方式" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('commissionFee')">
                  <a-form-model-item label="平台佣金费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="commissionFee">
                      <a-input-number class="number-input" v-model="model.commissionFee" placeholder="请输入平台佣金费率,保留小数点后两位。例如:25.25" step="0.01" :formatter="value => `${value}`.replace(/(\d)(?=(\d{2})+\.)/g, '$1,')" :parser="value =>value.match(/^[0-9]*\.([0-9]{0,2})|^[0-9]*/)[0]"  style="width:90%" />
                    <span class="right-icon">%</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('vatRate')">
                  <a-form-model-item label="vat税率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="vatRate">
                      <a-input-number class="number-input" v-model="model.vatRate" placeholder="请输入vat税率,保留小数点后两位。例如:25.25" step="0.01" :formatter="value => `${value}`.replace(/(\d)(?=(\d{2})+\.)/g, '$1,')" :parser="value =>value.match(/^[0-9]*\.([0-9]{0,2})|^[0-9]*/)[0]" style="width: 90%" />
                    <span class="right-icon">%</span>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24" v-if="showItemHandle('taxWay')">
                  <a-form-model-item label="税费计费方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="taxWay">
                    <j-dict-select-tag type="list" v-model="model.taxWay" dictCode="oms_store_tax_way"
                      placeholder="请选择税费计费方式" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </j-form-container>
          <a-empty v-else description="请先勾选左侧站点数据" style="margin-top: 15px;" />
        </a-col>
      </a-row>
    </a-spin>
    <a-modal :visible="tipVisible" width="360px" @ok="handleSubmit" :confirm-loading="confirmLoading" @cancel="tipVisible = false">
      <div style="display: flex; margin-top: 20px;">
        <a-icon type="exclamation-circle" style="font-size: 20px; margin-right: 10px;color: rgb(250, 173, 20);" />
        <span>您将要进行批量信息变更，页面选中字段内容为空时，将<b style="color: red;">清空</b>所有选中店铺下对应的字段信息,<b style="color:#910012FD;">谨慎操作</b>！ <span style="color: #c3c3c3;">你还要继续吗？</span> </span>
      </div>
    </a-modal>
  </j-modal>
</template>
  
<script>
 import { httpAction } from '@/api/manage'
export default {
  name: 'StoreAuthAmazonSiteSettingModal',
  data() {
    return {
      title: '',
      width: 900,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      model: {
        taxWay:'1',
      },
      checkModel:{
        checkedList:[],
        indeterminate:false,
        checkAll:false
      },
      tipVisible:false,  //提示弹窗
      validatorRules: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      dictOptions: [
        { label: 'IOSS', value: 'ioss' },
        { label: 'IOSS国际代码', value: 'iossInterCode' },
        { label: 'EORI', value: 'eori' },
        { label: 'EORI国际代码', value: 'eoriInterCode' },
        { label: '税号', value: 'taxNum' },
        { label: '税号所属国际代码', value: 'taxInterCode' },
        { label: '自动创建FBA仓库信息', value: 'autoCreateWarehouse' },
        { label: '平台佣金费率', value: 'commissionFee' },
        { label: 'vat税率', value: 'vatRate' },
        { label: '税费计费方式', value: 'taxWay' },
      ],
      url:{
        configBatch:'/oms/store/storeAuthAmazon/configBatch'
      },
    }
  },
  methods: {
    add(selectedRowKeys) {
      this.checkModel={
        checkedList:[],
        indeterminate:false,
        checkAll:false
      } 
      this.model=Object.assign({}, JSON.parse(JSON.stringify({taxWay:'1'}))); 
      this.model.ids = selectedRowKeys.join(',')
      this.visible = true
    },
    edit(record) {
      this.visible = true
    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    //右侧显示项
    showItemHandle(value){
      return (this.checkModel.checkedList && this.checkModel.checkedList.length > 0) ? this.checkModel.checkedList.indexOf(value)  > -1 :false
    },
     //全选
     onCheckAllChange(e){
      Object.assign(this.checkModel,{
        checkedList:e.target.checked ? this.dictOptions.map(item => item.value ) :[],
        indeterminate:false,
        checkAll:e.target.checked,
      })
    },
    //单选
    onChange(checkedList){
      this.checkModel.indeterminate = !!checkedList.length && checkedList.length < this.dictOptions.length;
      this.checkModel.checkAll = checkedList.length === this.dictOptions.length;
    },
    //确定
    handleOk() {
      this.tipVisible= true
    },
    handleCancel() {
      this.close()
    },
    //提交
    handleSubmit(){
      let parmaObj = this.model
      parmaObj.selectParams = this.checkModel.checkedList.join(',')
      this.confirmLoading=true
      httpAction(this.url.configBatch,parmaObj,'put')
        .then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.tipVisible  = false
            this.visible=false
            this.$emit('ok');
          }else{
            this.$message.warning(res.message);
          }
        })
        .finally(()=>{
          this.confirmLoading=false
        })
    },
   
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-alert.ant-alert-no-icon {
  margin-bottom: 10px;

  .ant-alert-message {
    color: #0e8ebe;
  }
}

/deep/.ant-divider-horizontal {
  margin: 0px 0 15px 0;
}

.row {
  color: #333;
  font-weight: bold;
  font-size: 15px;

  span {
    padding: 3px 2px;
    background: #1890ff;
    margin-right: 10px;
  }
}

.card-left {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px 0;
  .checkbox-all{
    padding:0 0 6px 10px;
    border-bottom:1px solid #E9E9E9;
  }
  .checkbox{
    padding: 0 10px;
  }
}
/deep/.ant-checkbox-group-item{
  display: block;
  margin: 15px 8px 15px 0px;
}
.number-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.right-icon {
  position: relative;
  padding: 5.5px 11px;
  line-height: 30px;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-left: none;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  transition: all .3s;
}
</style>